import styles from "./User.module.scss"
import { useSelector } from 'react-redux'
import { Row, Col, Avatar, Tabs, Button, message } from 'antd'
import { EditTwoTone, PlusCircleTwoTone } from '@ant-design/icons'
import User_Create from "@/components/User_Create"
import { useState } from "react"
import { HappyProvider } from '@ant-design/happy-work-theme';
import { useNavigate } from "react-router-dom"
import { userfood } from "@/apis/foods"
import { Local } from "@/utils/local";
import { useEffect } from "react"
import { Getall } from '@/apis/collect'
import Guard from "@/guard"
const base_url = import.meta.env.VITE_APP_URL
let timer: any = null
const User = () => {
    const user_Id = Local.get_info()._id
    const navigate = useNavigate()
    const userinfo = useSelector((state: any) => state.UserStore.userinfo)
    const [choose, setchoose] = useState('create')
    const thems = useSelector((state: any) => state.Appstore.theme)
    const [CurrentPage1, setCurrenPage1] = useState(1)
    const [CurrentPage2, setCurrenPage2] = useState(1)
    const [isButton1, setIsbutton1] = useState(false)
    const [isButton2, setIsbutton2] = useState(false)
    const [createList, setCreatelist] = useState<any>([])
    const [collectList, setCollectlist] = useState<any>([])
    const foods = [
        {
            label: `制作`,
            key: "create",
        },
        {
            label: `收藏`,
            key: "collect",
        },

    ]
    const Emptys = [
        {
            id: '1'
        }
    ]
    const onchange = (e: any) => {
        setchoose(e)
        if (collectList.length == 0) {
            getCollect(CurrentPage2)
        }
    }
    //编辑-------------
    const openedit = () => {
        navigate('/edituser')
    }
    //编辑-------------
    const getCollect = async (current: number) => {
        const res = await Getall(user_Id, current * 6 - 6)
        console.log(res, '13')
        if (res.data.length === 0) {
            message.info("没有更多了")
            setIsbutton2(true)
            return
        }
        setCollectlist([...collectList, ...res.data])
    }
    const getCreate = async (current: number) => {
        const result: any = await userfood(user_Id, current * 6 - 6)
        if (result.data.length === 0) {
            message.info("没有更多了")
            setIsbutton1(true)
            return
        }
        setCreatelist([...createList, ...result.data])
    }

    const scrolls = (total: number, top: number, height: number) => {
        clearTimeout(timer)
        timer = setTimeout(() => {
            if (choose == "create") {
                if (isButton1) {
                    return
                }
                if (total <= top + height + 1) {
                    setCurrenPage1(CurrentPage1 + 1)
                }
            } else {
                if (isButton2) {
                    return
                }
                if (total <= top + height + 1) {
                    setCurrenPage2(CurrentPage2 + 1)
                }
            }
        }, 200);
    }
    const filtetdelete = async (id: string) => {
        setCreatelist((current: any) => current.filter((item: any) => {

            return item._id !== id
        }))
    }
    const filtetdelete2 = async (id: string) => {
        console.log(id, '?')
        setCollectlist((current: any) => current.filter((item: any) => {

            return item.foods._id !== id
        }))
    }
    useEffect(() => {

        if (choose === "collect") {
            getCollect(CurrentPage2)

        } else {
            getCreate(CurrentPage1)

        }
    }, [CurrentPage1, CurrentPage2])

    return (
        <Guard>
            <div className={styles.User}  >
                <div className={styles.UserBody} onScroll={(e: any) => scrolls(e.target.scrollHeight, e.target.scrollTop, e.target.clientHeight)} style={{ height: "91vh", background: thems ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.4)' }}>
                    <Row justify={'center'}>
                        <Col xs={0} sm={24} md={24} lg={24}>
                            <div className={styles.UserBasicInfo}>
                                <div className={styles.UserBasicInfo_left}>
                                    <Avatar src={base_url + userinfo.avatar} size={{
                                        sm: 90,
                                        md: 110,
                                        lg: 130,
                                        xl: 150,
                                        xxl: 160
                                    }}></Avatar>
                                </div>
                                <div className={styles.UserBasicInfo_right}>
                                    <p>{
                                        userinfo.username ? userinfo.username : ""
                                    }</p>
                                    <p>  <span>{
                                        userinfo.constellation ? userinfo.constellation : ""
                                    }</span> <span>
                                            {
                                                userinfo.sex && userinfo.sex == "male" ? "男" : "女"
                                            }
                                        </span> <span>{
                                            userinfo.brithday ? userinfo.brithday : ""
                                        }</span></p>
                                    <p>{
                                        userinfo.description ? userinfo.description : ""
                                    }</p>
                                </div>
                                <div className={styles.UserBasicInfo_icon_edit}>
                                    <HappyProvider>
                                        <Button onClick={openedit} icon={<EditTwoTone />}></Button>
                                    </HappyProvider>
                                </div>
                                <div className={styles.UserBasicInfo_icon_add}>
                                    <HappyProvider>
                                        <Button onClick={() => navigate('/editfood')} icon={<PlusCircleTwoTone />}></Button>
                                    </HappyProvider>
                                </div>
                            </div>
                        </Col>
                        <Col xs={24} sm={0} md={0} lg={0}>
                            <div className={styles.UserBasicInfo_mobile}>

                                <div className={styles.UserBasicInfo_mobile_left}>
                                    <Avatar src={base_url + userinfo.avatar} size={{
                                        xs: 90
                                    }}></Avatar>
                                </div>
                                <div className={styles.UserBasicInfo_mobile_right}>
                                    <p>{
                                        userinfo.username ? userinfo.username : ""
                                    }</p>
                                    <p>  <span>{
                                        userinfo.constellation ? userinfo.constellation : ""
                                    }</span> <span>{
                                        userinfo.sex && userinfo.sex == "male" ? "男" : "女"
                                    }</span> <span>{
                                        userinfo.brithday ? userinfo.brithday : ""
                                    }</span></p>
                                    <p>{

                                        userinfo.description ? userinfo.description : ""
                                    }</p>
                                </div>
                                <div className={styles.UserBasicInfo_icon_edit}>
                                    <HappyProvider>
                                        <Button onClick={openedit} icon={<EditTwoTone />}></Button>
                                    </HappyProvider>
                                </div>
                                <div className={styles.UserBasicInfo_icon_add}>

                                    <HappyProvider>
                                        <Button onClick={() => navigate('/editfood')} icon={<PlusCircleTwoTone />}></Button>
                                    </HappyProvider>
                                </div>
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <Col xs={24} sm={24} md={24} lg={24}>
                            <Tabs
                                defaultActiveKey={location.pathname}
                                centered
                                items={foods}
                                style={{
                                    fontWeight: "bold",
                                    fontFamily: "幼圆"
                                }}
                                onChange={onchange}

                            />
                        </Col>
                    </Row>
                    <Row justify={"space-evenly"} style={{ padding: "0 5px" }}>

                        {
                            choose === "create" ? createList.map((item: any, index: any) => {
                                return <User_Create Filtetdelete={filtetdelete} Filtetdelete2={filtetdelete2} keyIndex={index} key={index} item={item} type={choose === "create" ? true : false}></User_Create>
                            }) : collectList.map((item: any, index: number) => {


                                return <User_Create Filtetdelete={filtetdelete} Filtetdelete2={filtetdelete2} keyIndex={index} key={index} item={item.foods} type={choose === "create" ? true : false}></User_Create>
                            })
                        }
                        {
                            Emptys.map((_, index) => {
                                return <Col xs={24} sm={24} md={24} lg={11} key={index}></Col>
                            })
                        }
                    </Row>
                </div>

            </div>
        </Guard>
    )
}

export default User